/*
    操作state有三个步骤
    1、定义状态
    在定义状态的写法有两种
    1）在构造函数中定义(建议)
    2、访问数据
    在render函数中通过{this.state.count}
    3、更新状态

*/
import React, { Component } from 'react'

export default class Counter extends Component {
  constructor(){
    super()
    //如果在一个类组件中要明确的定义constructor，那么就需要要在构造函数的首行，调用super()
    //定义状态
    this.state={
        count:10
    }
  }
  /*
    箭头函数的写法
  */
 increment=()=>{
    //更新状态
    //setState的参数可以是一个对象
    this.setState({
        count:this.state.count+1
    })
    
 }
  render() {
    return (
      <div>
        <h1>计数器</h1>
        <h2>{this.state.count}</h2>
        <button onClick={()=>{this.increment()}}>+</button>
      </div>
    )
  }
}
